<template>
    <div class="con">
        <div class="nav_bar">
            <div class="company">陪诊师</div>
        </div>
        <div>
            <input v-model="name" show-action shape="round" placeholder="搜索陪诊师" class="searchEscort">
            <div @click="searchEscort(name)" class="searchbtn">搜索</div>
        </div>
        <div>
            <van-dropdown-menu swipe-threshold="4" class="dropdown">
                <van-dropdown-item v-model="value1" :options="option1" @change="patientinfo" />
                <van-dropdown-item v-model="value2" :options="option2" @change="patientinfo" />
                <van-dropdown-item v-model="value3" :options="option3" @change="patientinfo" />
                <van-dropdown-item v-model="value4" :options="option4" @change="patientinfo" />
            </van-dropdown-menu>
        </div>
    </div>
    <div class="escort_box">
        <div class="escort_detail" v-for=" (item, i) in escortData" :key="i">
            <img :src=item.img class="img_detail">
            <button class="escort_status">{{ item.status }}</button>
            <p class="escort_name">{{ item.e_name }} </p>
            <span class="escort_sex">{{ item.e_sex }} |</span>
            <span class="escort_age">{{ item.e_age }} |</span>
            <span class="escort_addr">{{ item.address }} </span>
            <span class="escort_good">
                <van-icon name="star" class="star" />
                {{ item.favorable_rate }}</span>
            <span class="escort_count">接单量:{{ item.order_count }}单</span>
            <span class="escort_phone">{{ item.e_phone }}</span>
        </div>
    </div>
    <div >
        <tabbar></tabbar>
    </div>
</template>
<script setup>
import { ref, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '@/http';
import tabbar from '@/components/tabbar.vue';
const router = useRouter();
let name = ref('');
let escortData = ref([])
const value1 = ref(0);
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const escortBoxHeight = ref(0);
const option1 = [
    { text: '性别', value: 0 },
    { text: '男', value: '男' },
    { text: '女', value: '女' },
];
const option2 = [
    { text: '年龄', value: '' },
    { text: '<30', value: '<30' },
    { text: '31~40', value: '31~40' },
    { text: '41~50', value: '41~50' },
];
const option3 = [
    { text: '接单量', value: '' },
    { text: '0~100', value: '0~100' },
    { text: '101~200', value: '101~200' },
    { text: '201~300', value: '201~300' },
    { text: '301~400', value: '301~400' },
];
const option4 = [
    { text: '评分', value: '' },
    { text: '<3.0', value: '<3.0' },
    { text: '3.0~4.0', value: '3.0~4.0' },
    { text: '4.0~5.0', value: '4.0~5.0' },
];

const queryAccepts = ({ sex = null, age = null, order = null, score = null } = {}) => {
    const params = {};
    if (sex !== null) {
        params.sex = sex;
    }
    if (age !== null) {
        params.age = age;
    }
    if (order !== null) {
        params.order = order;
    }
    if (score !== null) {
        params.score = score;
    }
    return http.get('/patient/escortinfo/', {
        params
    })
}

const patientinfo = () => {
    const sex = value1.value === '' ? null : value1.value;
    const age = value2.value === '' ? null : value2.value;
    const order = value3.value === '' ? null : value3.value;
    const score = value4.value === '' ? null : value4.value;
    console.log(sex, age, order, score)
    queryAccepts({ sex, age, order, score }).then(res => {
        console.log(res)
        escortData.value = res.data.escorts
    }).catch(err => {
        console.log(err)
    })
}

onMounted(() => {
    http.get('/patient/escortinfo/')
        .then(res => {
            escortData.value = res.data.escorts;
            console.log('<<<', escortData.value);
            updateEscortBoxHeight();
        })
        .catch(error => {
            console.log("获取陪诊师信息出错:", error);
        });
})

function searchEscort() {
    console.log(">>>>>", name.value)
    http.get(`/patient/search/${name.value}/`)
        .then(res => {
            if (res.status === 200) {
                console.log('陪诊师信息', res.data);
                escortData.value = res.data.escorts;
            } else {
                console.log("错误", res.data.error);
            }
        })
        .catch(error => {
            console.log("错误", error);
        });
};

const updateEscortBoxHeight = () => {
    nextTick(() => {
        const itemHeight = 150; 
        const padding = 20; 
        escortBoxHeight.value = escortData.value.length * itemHeight + padding;
    });
}
</script>
<style scoped>
.fixed-con {
    height: 100%;
    background-color: white;
}

.company {
    position: absolute;
    left: 40%;
    top: 5%;
    font-size: 18px;
    font-weight: 700;
}


.searchEscort {
    position: absolute;
    top: 10%;
    left: 10%;
    height: 4%;
    border-radius: 20px;
    border: 1px solid rgba(237, 236, 235, 0.94);
    background-color: rgb(242, 242, 242);
    font-size: 14px;
    padding-left: 6%;
}

.searchbtn {
    position: absolute;
    top: 11%;
    left: 70%;
    height: 3%;
}

.dropdown {
    position: absolute;
    top: 16%;
    width: 100%;
}

.escort_box {
    margin-top: 160px;
    padding-bottom: 50px;
}

.escort_detail {
    position: relative;
    background-color: white;
    margin: 2% 5% 0;
    width: 90%;
    height: 150px;
    border-radius: 10px;
    border: 1px solid rgb(236, 233, 233);
    font-weight: 700;
    font-size: 14px;
}

.img_detail {
    
}
.escort_detail {
    position: relative;
    background-color: white;
    margin: 2% 5% 0;
    width: 90%;
    height: 150px;
    border-radius: 10px;
    border: 1px solid rgb(236, 233, 233);
    font-weight: 700;
    font-size: 14px;
}

.img_detail {
    position: absolute;
    width: 35%;
    height: 100px;
    left: 5%;
    margin-top: 5%;
    border-radius: 10px;
}

.escort_name {
    position: absolute;
    left: 45%;
    top: 0;
}

.escort_status {
    position: absolute;
    top: 5%;
    left: 88.5%;
    width: 40px;
    height: 20px;
    border-radius: 50px 0 0 50px;
    background-color: rgb(0, 149, 255);
    border: none;
    color: rgb(247, 241, 241);
    font-size: 12px;
}

.escort_sex {
    position: absolute;
    left: 45%;
    top: 20%;
}

.escort_age {
    position: absolute;
    left: 55%;
    top: 21%;
}

.escort_addr {
    position: absolute;
    left: 70%;
    top: 20%;
}

.escort_good {
    position: absolute;
    left: 45%;
    top: 35%;
}

.star {
    color: rgb(247, 114, 19);
}

.escort_count {
    position: absolute;
    left: 70%;
    top: 35%;
}

.escort_phone {
    position: absolute;
    left: 45%;
    top: 50%;
}

.escort_service {
    position: absolute;
    left: 45%;
    top: 60%;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

</style>